<template>
  <a-layout-sider class="sider" breakpoint="lg" collapsed-width="0">
    <h2 class="title">后台管理</h2>
    <a-menu
      theme="dark"
      mode="inline"
      :open-keys="openKeys"
      style="width: 100%; height: 100%"
      @openChange="onOpenChange"
    >
      <a-sub-menu key="sub1">
        <span slot="title"><a-icon type="mail" /><span>项目介绍</span></span>
        <a-menu-item key="1" @click="$router.push('/introduce')"><a-icon type="eye" /> <span>毕设介绍</span> </a-menu-item>
        <a-menu-item key="2" @click="$router.push('/paper')"><a-icon type="file-text" /> <span>毕业论文</span> </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <span slot="title"
          ><a-icon type="appstore" /><span>业务逻辑</span></span
        >
        <a-sub-menu :key="item.path" v-for="item in menusList">
          <span slot="title"
            ><a-icon :type="iconsList[item.id]" /><span>{{
              item.authName
            }}</span></span
          >
          <a-menu-item
            :key="item1.id"
            v-for="item1 in item.children"
            @click="$router.push(`/${item1.path}`)"
          >
            <span
              ><a-icon type="appstore" /><span>{{ item1.authName }}</span></span
            >
          </a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      rootSubmenuKeys: ["sub1", "sub2"],
      openKeys: ["sub2", "this.$route.path"],
      iconsList: {
        125: "user",
        103: "apartment",
        101: "shopping",
        102: "profile",
        145: "bar-chart",
      },
    };
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },

    jump(lu) {
      // console.log(lu);
    },
  },
  computed: {
    ...mapState({
      menusList: (state) => state.other.menusList || [],
    }),
  },
};
</script>

<style lang="less" scoped>
// .sider {
//   background-color: #008b8b;
// }

.title {
  text-align: center;
  padding-top: 10px;
  color: #fff;
}
</style>